import { useState } from "react";
import { useNavigate } from "react-router-dom";
import ModalCreate from "./ModalCreate";
import "./assets/app.scss";
import pencil from "./assets/img/pencil.svg";
interface Category {
    id: number;
    name: string;
    final_group: boolean;
}
interface Task {
    id: number;
    name: string;
    category_id: number;
    description?: string;
}
interface EditProps {
    id: number;
    name: string;
    category_id?: number;
    description?: string;
    final_group?: boolean;
}
function HomePage() {
    const navigate = useNavigate();
    const categoriesSample: Category[] = [
        { id: 1, name: "testtesttesttesttesttesttesttesttest", final_group: false },
        { id: 2, name: "test2", final_group: false },
        { id: 3, name: "test3", final_group: false },
        { id: 4, name: "test4", final_group: true },
    ];
    const [openModalCreate, setOpenModalCreate] = useState(false);
    const [needDescription, setNeedDescription] = useState(false);
    const [editProps, setEditProps] = useState<EditProps | undefined>();
    const tasksSample: Task[] = [
        { id: 1, name: "test1", category_id: 1, description: "testestetstetetst" },
        { id: 2, name: "test1", category_id: 1 },
        { id: 3, name: "test1", category_id: 1 },
        { id: 4, name: "test1", category_id: 1 },
        { id: 5, name: "test1", category_id: 1 },
        { id: 6, name: "test1", category_id: 1 },
        { id: 7, name: "test1", category_id: 1 },
        { id: 8, name: "test1", category_id: 1 },
        { id: 9, name: "test1", category_id: 1 },
        { id: 10, name: "test1", category_id: 1 },
        { id: 11, name: "test1", category_id: 1 },
        { id: 12, name: "test1", category_id: 1 },
        { id: 13, name: "test1", category_id: 1 },
        { id: 14, name: "test1", category_id: 1 },
    ];
    const usersSample = [
        { name: "Test1", email: "test1@mail.com" },
        { name: "Test2", email: "test2@mail.com" },
        { name: "Test3", email: "test3@mail.com" },
        { name: "Test4", email: "test4@mail.com" },
        { name: "Test5", email: "test5@mail.com" },
        { name: "Test6", email: "test6@mail.com" },
        { name: "Test7", email: "test7@mail.com" },
        { name: "Test8", email: "test8@mail.com" },
        { name: "Test9", email: "test9@mail.com" },
        { name: "Test10", email: "test10@mail.com" },
        { name: "Test11", email: "test11@mail.com" },
        { name: "Test12", email: "test12@mail.com" },
    ];
    const [tasks, setTasks] = useState(tasksSample);
    const [users, setUsers] = useState(usersSample);
    const [categories, setCategories] = useState(categoriesSample);
    const [usersModalOpen, setUsersModalOpen] = useState(false);
    const createCategory = (name: string, final_group: boolean) => {
        const id = categories[categories.length - 1].id + 1;
        setCategories((previous) => [...previous, { id: id, name: name, final_group: final_group }]);
    };
    const createTask = (name: string, description: string, category_id: number) => {
        const id = tasks[tasks.length - 1].id + 1;
        setTasks((previous) => [
            ...previous,
            { id: id, name: name, description: description, category_id: category_id },
        ]);
    };
    const editCategory = (id: number, name: string, final_group: boolean) => {
        setCategories((previous) => [
            ...previous.map((item) => {
                if (item.id === id) {
                    item.name = name;
                    item.final_group = final_group;
                }
                return item;
            }),
        ]);
    };
    const editTask = (id: number, name: string, category_id: number, description: string) => {
        setTasks((previous) => [
            ...previous.map((item) => {
                if (item.id === id) {
                    item.name = name;
                    item.category_id = category_id;
                    item.description = description;
                }
                return item;
            }),
        ]);
    };
    return (
        <div className='home-page'>
            {openModalCreate ? (
                <ModalCreate
                    name={needDescription ? "Task" : "Category"}
                    setOpen={setOpenModalCreate}
                    onConfirm={({
                        id,
                        name,
                        category_id,
                        description,
                        final_group,
                    }: {
                        id?: number;
                        name?: string;
                        category_id?: number;
                        description?: string;
                        final_group?: boolean;
                    }) => {
                        !needDescription && !editProps
                            ? createCategory(name || "", final_group!)
                            : createTask(name || "", description || "", category_id!);
                        !needDescription && editProps
                            ? editCategory(id!, name || "", final_group!)
                            : editTask(id!, name || "", category_id!, description || "");
                    }}
                    needDescription={needDescription}
                    edit={editProps}
                />
            ) : null}
            {usersModalOpen ? (
                <div className='users_modal'>
                    <div className='modal-create__header'>
                        <h1>Users</h1>
                        <button
                            className='modal-create__close-btn'
                            onClick={() => {
                                setUsersModalOpen(false);
                            }}
                        >
                            X
                        </button>
                    </div>
                    <div className='users_modal__container'>
                        {users.map((user, index) => (
                            <div className='users_modal__user' key={index}>
                                <div className='user_modal__info'>
                                    <h1>{user.name}</h1>
                                    <h4>{user.email}</h4>
                                </div>
                                <button
                                    className='user_modal__delete_user_btn'
                                    onClick={() => {
                                        setUsers((prev) => prev.filter((it) => it !== user));
                                    }}
                                >
                                    X
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            ) : null}
            <div className='menu'>
                <h1 className='menu__header'>Board</h1>
                <div className='menu__btns'>
                    <button
                        className='menu__btn'
                        onClick={() => {
                            setUsersModalOpen(true);
                        }}
                    >
                        MoveModal
                    </button>
                    <button
                        className='menu__btn'
                        onClick={() => {
                            setUsersModalOpen(true);
                        }}
                    >
                        People
                    </button>
                    <button
                        className='menu__btn'
                        onClick={() => {
                            navigate("/");
                        }}
                    >
                        Go back
                    </button>
                    <button
                        className='menu__btn'
                        onClick={() => {
                            navigate("/login");
                        }}
                    >
                        Log out
                    </button>
                </div>
            </div>
            <button
                id='new-cat-btn'
                onClick={() => {
                    setEditProps(undefined);
                    setNeedDescription(false);
                    setOpenModalCreate(true);
                }}
            >
                <h2>New</h2>
            </button>
            <div className='desk'>
                {categories
                    .sort((a, b) => {
                        if (!a.final_group) return -1;
                        else return 1;
                    })
                    .map((item) => {
                        return (
                            <div className='category' key={item.id}>
                                <div className='category__header'>
                                    <h2>{item.name}</h2>
                                    <button
                                        className='category__edit-btn'
                                        onClick={() => {
                                            setNeedDescription(false);
                                            setEditProps({
                                                id: item.id,
                                                name: item.name,
                                                final_group: item.final_group,
                                            });
                                            setOpenModalCreate(true);
                                        }}
                                    >
                                        <img src={pencil} alt='edit' className='category__edit-btn-img' />
                                    </button>
                                </div>
                                <button
                                    className='category__create-task-btn'
                                    onClick={() => {
                                        setEditProps(undefined);
                                        setNeedDescription(true);
                                        setOpenModalCreate(true);
                                    }}
                                >
                                    +
                                </button>
                                <div className='tasks'>
                                    {tasks
                                        .filter((task) => task.category_id === item.id)
                                        .map((task) => {
                                            return (
                                                <div className='tasks__task' key={task.id}>
                                                    <div>{task.name}</div>
                                                    <div
                                                        className='tasks__task-edit-btn'
                                                        onClick={() => {
                                                            setNeedDescription(true);
                                                            setEditProps({
                                                                id: task.id,
                                                                name: task.name,
                                                                category_id: item.id,
                                                                description: task.description,
                                                            });
                                                            setOpenModalCreate(true);
                                                        }}
                                                    >
                                                        <img src={pencil} alt='Edit' />
                                                    </div>
                                                </div>
                                            );
                                        })}
                                </div>
                            </div>
                        );
                    })}
            </div>
        </div>
    );
}

export default HomePage;
